<template>

  <div class="loginBox">
    <h2>登录</h2>
    <hr class="hr">
    <el-form action="#" class="loginForm" :model="loginForm" :rules="loginRules" ref="loginForm" autoComplete="on">
      <dl class="lg-dl">
        <dd>
          <el-form-item label="账号" prop="account">
            <el-input type="text" placeholder="用户名/电话" v-model="loginForm.account" autoComplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="密码" v-model="loginForm.password" autoComplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
<!--      <dl class="lg-dl">-->
<!--        <dd>-->
<!--          &nbsp;&nbsp;&nbsp;<input type="checkbox" value="1" name="remember"-->
<!--                                   id="remember">&nbsp;<label>请保存我这次的登录信息。</label>-->
<!--        </dd>-->
<!--      </dl>-->
      <dl class="lg-dl">
        <dd>
          <input type="hidden" name="act" value="act_login">
          <input type="hidden" name="back_act" value="http://www.jyxue.com.cn/news.php?id=15">
          <input class="login-btn" type="submit" name="submit" value="立即登录" :loading="loading"
                 @click.prevent="handleLogin"></dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <div class="lg-link">
            <router-link class="list-group-item" active-class="active" to="/register">立即注册</router-link>
            /
            <router-link class="list-group-item" active-class="active" to="/findPassword">忘记密码</router-link>
          </div>
        </dd>
      </dl>
    </el-form>

    <!--    <div class="kuai-su">-->
    <!--      <span>使用合作网站账号登录：</span>-->
    <!--      <a href="user.php?act=oath&amp;type=qq"><img src="http://www.jyxue.com.cn/themes/default/images/qq_login.gif" width="63" height="24"></a>-->
    <!--      <a href="user.php?act=+oath&amp;type=weibo"><img src="http://www.jyxue.com.cn/themes/default/images/sina_login_logo.gif" width="63" height="24"></a>-->
    <!--      <a href="user.php?act=oath&amp;type=alipay"><img src="http://www.jyxue.com.cn/themes/default/images/alipay_login.png" width="63" height="24"></a>-->
    <!--      <a href="user.php?act=oath&amp;type=wx"><img src="http://www.jyxue.com.cn/themes/default/images/taobao_login.gif" width="63" height="24"></a>-->
    <!--    </div>-->
    <!--    <FootFather/>-->
  </div>

</template>

<script>


// import {getRequest} from "@/utils/api";

export default {
  name: "login",
  components: {},
  data() {
    // let validateAccount = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入账号'));
    //   } else {
    //     if (value !== '') {
    //       this.$refs.loginForm.validateField('account');
    //     }
    //     callback();
    //   }
    // };
    // var validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入密码'));
    //   } else {
    //     if (value !== '') {
    //       this.$refs.loginForm.validateField('password');
    //     }
    //     callback();
    //   }
    // };
    return {
      loginForm: {
        account: '',
        password: '',
      },
      loading: false,
      loginRules: {
        account:
            [
              {required: true, message: '请输入账号名', trigger: 'blur'},
              {min: 1, max: 11, message: '长度在 1 到 11 个字符', trigger: 'blur'}
            ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          // {
          //   trigger: 'blur',
          //   validator: (rule, value, callback) => {
          //     var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/
          //     if (!passwordreg.test(value)) {
          //       callback(new Error('密码必须由数字、字母、特殊字符组合,请输入8-20位'))
          //     }else{
          //       callback()
          //     }
          //   }
          // }
        ]
      },
      pwdType: 'password',
      // dialogVisible:false,
      // supperDialogVisible:false
      showName: 0
    };

  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid=>{
        if(valid){
          this.postRequest('/cms/user/login', this.loginForm).then(resp => {
            if (resp.status===200) {
              this.$message.success('登录成功。')
              this.showName = 1
              const tokenStr = resp.data.tokenHead + resp.data.token
              window.sessionStorage.setItem('tokenStr', tokenStr)
              window.sessionStorage.setItem('showName', this.showName)
              window.sessionStorage.setItem('username', this.loginForm.account)

              // this.$store.dispatch('getUserId')
              this.getRequest('/cms/user/info').then((resp) => {
                console.log(resp)
                window.sessionStorage.setItem('userId',resp.data.id)
                // window.sessionStorage.setItem('headImg',resp)
              })

              // 跳转首页
              this.$router.replace('/home')
              location.reload()

            }else{
              this.$message.error('用户名或密码错误。')
            }
          })
        }else{
          console.log('参数验证不合法！')
          return false
        }
      })



    },

  },
  created() {
    // if(this.loginForm.account === undefined || this.loginForm.account === null || this.loginForm.account === ''){
    //   this.loginForm.account ='user'
    // }
    // if(this.loginForm.password === undefined || this.loginForm.password === null){
    //   this.loginForm.password = ''
    // }
  }
}
</script>

<style>
.loginBox {
  width: 557px;
  margin: 103px auto 116px auto;
  border: 1px solid #b7b7b7;
  background: #FFF;
  overflow: hidden;
  padding: 28px;
}

.loginBox h2 {
  text-align: center;
  margin-top: 1em;
}

.loginBox hr {
  width: 80%;
  color: lightgray;
  margin: 1em auto;
}

.loginForm .lg-dl {
  width: 316px;
  margin: 16px auto;
}

/*搜索框样式*/
.loginForm .lg-dl dd el-input {
  width: 294px;
  height: 20px;
  padding: 10px;
  border: 1px solid #dcdcdc;
  color: #8d8d8d;
}

#remember {
  width: 1em;
}

.loginForm .lg-dl .login-btn {
  width: 316px;
  height: 46px;
  background: #b50029;
  color: #FFF;
  border: none;
  font-size: 18px;
  font-family: "微软雅黑";
  cursor: pointer;
  margin-top: 31px;
}

.lg-dl .lg-link a {
  margin: 0 5px;
}


.kuai-su {
  border-bottom: 1px solid #dcdada;
  padding: 65px 0 7px 124px;
}


</style>